<!DOCTYPE html>
<!-- 网页使用的语言 -->
<html lang="zh-CN">
<head>
    <base href="<%=basePath%>"/>
    <!-- 指定字符集 -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>修改用户</title>

    <link href="css/bootstrap.min.css" rel="stylesheet">
    <script src="js/jquery-2.1.0.min.js"></script>
    <script src="js/bootstrap.min.js"></script>

</head>
<body>
<div class="container" style="width: 400px;">
    <h3 style="text-align: left;">编辑用户</h3>
    <form action="update" method="post" @submit="updateUser($event)">
        <div class="form-group">
            <label for="username">用户名：</label>
            <input type="text" class="form-control" v-model="user.username" id="username" name="username" readonly="readonly" placeholder="请输入用户名"/>
        </div>

        <div class="form-group">
            <label for="name">姓名：</label>
            <input type="text" class="form-control" v-model="user.name" id="name" name="name" readonly="readonly" placeholder="请输入姓名"/>
        </div>

        <div class="form-group">
            <label for="sex">性别：</label>
            <select name="sex" class="form-control" v-model="user.sex" id="sex">
                <option value="男">男</option>
                <option value="女">女</option>
            </select>
        </div>

        <div class="form-group">
            <label for="password">密码：</label>
            <input type="password" class="form-control" v-model="user.password" id="password" name="password" placeholder="请输入密码">
        </div>

        <div class="form-group" style="text-align: right">
            <input class="btn btn-primary" type="button" @click="updateUser" value="保存"/>
        </div>
    </form>
</div>
<script src="js/vuejs-2.5.16.js"></script>
<script src="js/axios-0.18.0.js"></script>
<script src="js/getParameter.js"></script>
<script>
    new Vue({
        el: ".container",
        data:{
            user:{}
        },
        created:function(){
            let id = getParameter("id");
            this.findById(id);
        },
        methods:{
            findById:function(id){
                axios.get("/user/"+id).then(response=>{
                    this.user = response.data;
                });
            },
            updateUser:function(){
                axios.post("/user/update", this.user).then(response=>{
                    if (response.data.flag) {
                        location.href = "list.html";
                    }else{
                        alert("修改失败");
                    }
                });
            }
        }
    });
</script>
</body>
</html>